// 生成自定义项列表，可编辑或查看2025-01-23

import { s_getcommontableinfo } from "@/services/basis";
import { ActionType, ProCard, ProForm, ProFormInstance, ProFormSelect, ProFormText, ProTable } from "@ant-design/pro-components";
import { Button, Modal, Space, Tag } from "antd";
import { useRef, useState } from "react";

//入参：setDate:主调程序的函数，应为useState返回，在主程序中用useEffect监控
// objtype:1物料，2供应商,3客户，dotype:1可编辑，2只读，id
const App:React.FC<{setData:any,objtype:number,dotype:number,id:any,rowno:any,setRowno:any}>=(props)=>{
    const {objtype,dotype,id}=props;
    const [open,setOpen]=useState(false);
    const form_ref=useRef<ProFormInstance>();
    const [formItem,setFormItem]=useState<any[]>([]);
    const [tdata,setTdata]=useState([]);
    const [userdefine,setUserdefine]=useState<{id:any,uname:any,vid:any,value:any}[]>([]);
     
    //关闭MODAL
    function close(){
        setOpen(false)
    }

    //打开MODAL
    async function query(){
        //先获取ID对应的自定义项+自定义明细，生成组件；x.data[0],x.data[1]
        const x=await s_getcommontableinfo({source:'queryuserdefine',id});
        var temp:any[]=[];
        //  alert(JSON.stringify(x.data[0]));
        setTdata(x.data[0]);
        if(x.data[0].length>0){
           setUserdefine(x.data[1]);
            x.data[0].map((item:any)=>{
                // 文本框
                if(item.input_style==1)
                    temp.push(<ProFormText name={'u'.concat(item.userdefine_id)} label={item.userdefine_name}/>);
                //下拉框
                else if(item.input_style==2){
                    // alert(JSON.stringify(x.data[1]));
                    var options:any[]=x.data[1].map((item2:any)=>{
                           if(item2.userdefine_id==item.userdefine_id)
                               return  {value:item2.vid,label:item2.value};
                       });
                    temp.push(<ProFormSelect name={'us'.concat(item.userdefine_id)} label={item.userdefine_name} 
                               options={options.filter((item3)=>item3!=null)}
                          />);
                   }
            }

            );
            setFormItem(temp);
            props.setRowno(props.rowno);
            setOpen(true);
        }
    }

    //保存信息
    async function save(){
        //   alert(JSON.stringify(form_ref.current?.getFieldsValue()));
        //   alert(JSON.stringify(userdefine));
        const fdata=form_ref.current?.getFieldsValue();
        //应返回一个数组，包含对象：[{id,uname,vname,value}]
        var x:any[]=[];
        Object.keys(fdata).forEach(key=>{
               //    下拉框
             if(key.indexOf('us')==0){
                   const uname=userdefine.filter((item:any)=>item.userdefine_id==key.substring(2))[0].uname;
                   const vlabel2=userdefine.filter((item:any)=>item.userdefine_id==key.substring(2)
                                 &&item.vid==fdata[key]);
                   const vlabel=vlabel2.length>0?vlabel2[0].value:null;
                   if(vlabel!=null)
                      x.push({uid:key.substring(2),
                           uname,
                           vlabel,
                           value:fdata[key],
                           });
                 //文本框      
             } else 
                if(fdata[key]!=''&&fdata[key]!=null)  
                x.push({uid:key.substring(1),
                        uname:tdata.filter((item:any)=>item.userdefine_id==key.substring(1))[0].userdefine_name,
                        vlabel:'',
                        value:fdata[key],
                     });
            });

        // alert(JSON.stringify(x)); 
        props.setData(x);
        setOpen(false);
    }

    return <>
       <Button onClick={()=>query()}>选择属性</Button>
       <Modal open={open} destroyOnClose closable okButtonProps={{hidden:true}} cancelButtonProps={{hidden:true}}
             onClose={()=>close()} onCancel={()=>close()} width={'60%'}>
            <ProCard title='自定义属性' style={{height:600}}
              extra={<Space>
                <Button onClick={()=>save()}>保存</Button>
                <Button onClick={()=>close()}>取消</Button>
              </Space>}
              >
                <ProForm formRef={form_ref} submitter={false}>
                    {/* {JSON.stringify(userdefine)} */}
                    {formItem}
                </ProForm>
              </ProCard>
       </Modal>
    </>;
}

export default App;